<template>
    <div class="row">
        <div class="col-md-6">
            <form action=" " method="POST" name="zhuce" class="navbar-form " role="search" >
                <div class="form-group" autocomplete>
                    <span>账号</span>
                   <input type="text" name="name" class="form-control" placeholder="注册用户名" autofocus required
                   maxlength="6">
                   <span>密码</span>
                   <input v-model="pass"  type="password" name="password" class="form-control"  placeholder="注册密码" required maxlength="12">
                   
                   <span>确认密码</span>
                   <span class="tsz " v-show="ts"> 亲，密码不一致哦</span>
                   <input v-model="pass1" type="password" name="password1" class="form-control"  placeholder="确认密码" required   >
                   
                   
                   <span>邮箱</span>
                   <input type="email" name="email" class="form-control"  placeholder="邮箱" required @focus="yanzheng" >
                   <span>性别</span>&nbsp;&nbsp;
                   <input type="radio" name="xing" value="男" ><span>男</span>
                   <input type="radio" name="xing" value="女"><span>女</span><br>
                   <span>学历</span>&nbsp;&nbsp;
                   <input type="radio" name="xueli" value="初中"  ><span>初中</span>
                   <input type="radio" name="xueli" value="高中"  ><span>高中</span>
                   <input type="radio" name="xueli" value="大专"  ><span>大专</span>
                   <input type="radio" name="xueli" value="本科"  ><span>本科</span>
                   <input type="radio" name="xueli" value="其他"  ><span>其他</span>
                   <div class="btn-group">
                   <button type="submit" class="btn btn-primary  " >提交</button>
                   <button type="reset" class="btn  btn-secondary">取消</button>
                   </div>   		
                </div>
              
            </form>
        </div>

    </div>
</template>

<script>
      
        
    export default {
         data() {
            return {
               pass1:"",
               pass:"", 
               ts:false 
                }
            },
     methods:{
         yanzheng(){
             
             if (this.pass1 === this.pass) {
                 this.ts=false
               }else{
                   this.ts=true
                   this.pass1=""

               }
         }
     },
    
        
    }
</script>

<style  scoped>
.col-md-6{
    margin: 50px auto;
}
input{
    margin-bottom: 38px;
}
button{
    display: block;
     margin:  auto;
}
.tsz{
    font-size: 22px;
    color: red;
}
</style>